<template>
 	<div class="layui-layout layui-layout-admin" id="provin01">
       <div id='tb04' class="mapbg" style="width: 100%;height:100%;"></div>
       <div class="logo"></div>
       <div class="foot">
         <Secondnav urlname='provin01'></Secondnav>
       </div>
       <div class="filterbg"></div>
       <div class="popup">
       	<a href="javascript:;" @click="close" class="popupClose"></a>
       	<div class="summary jqxz" v-if="jq==1">
       		<h3>选择街区</h3>
       		<div class="phb01">
	          	<dl v-for="(item,index) in arealist" @click="showareaxq(index)">
	          		<dt><img :src='"../../../static/other/css/zlgj/images/"+item.dates.logo+".jpg"'></dt>
	          		<dd><span>{{item.dates.name}}</span></dd>
	          	</dl>

	        </div>
       	</div>
       	<div class="summary jqxz" v-else>
       		<h3>{{arealist[jqindex].dates.name}}</h3>
       		<div class="phb01" style="text-align: center;height:80%;padding:20px;">
       			<img style='height:100%;display:block;margin:0 auto;' :src='"../../../static/other/css/zlgj/images/"+arealist[jqindex].dates.rl[rlindex]+".png"'>
       		</div>
       	</div>
       </div>
       <div class="mystep01">
       		<h3>高品质步行街发展情况</h3>
            <div class="inner">
                <div class="chart">
                   <div id="tb02" style="height: 200px;width:100%;"></div>
                </div>
            </div>
       </div>
       <div class="mystep01" style="top:35%;">
            <div class="inner">
                <h3>各街区复工率情况（%）</h3>
                <div class="chart">
                   <div id='tb05' style="width: 100%;height:100%;"></div>
                </div>
            </div>
        </div>
        <div class="mystep01" style="top:67%">
            <div class="inner">
                <h3>高品质步行街发展指数一览</h3>
                <div class="chart">
                    <div id='tb03' style="width: 100%;height:100%;"></div>
                </div>
            </div>
        </div>
        <div class="mystep01 mystep02" style='height:60%'>
        	 <h3>高品质步行街分布情况</h3>
             <div class="inner">
                 <div class="chart">
                    <div id="tb07" style="width:100%;height:100%;"></div>
                    <div class="bxjlist"></div>
                    <div class="tjlist">
                    	<ul>
                    		<li @click="tjinfo(0)">
                    			<img src="../../../static/other/css/zlgj/images/tj02.png">
                    			<span>到访情况</span>
                    		</li>
                    		<li @click="tjinfo(1)">
                    			<img src="../../../static/other/css/zlgj/images/tj01.png">
                    			<span>热力统计</span>
                    		</li>
                        <li @click="tjinfo(2)">
                        	<img src="../../../static/other/css/zlgj/images/tj03.png">
                        	<span>性别统计</span>
                        </li>
                        <li @click="tjinfo(3)">
                        	<img src="../../../static/other/css/zlgj/images/tj04.png">
                        	<span>消费统计</span>
                        </li>
                    	</ul>
                    </div>
                 </div>
             </div>
        </div>

        <div class="mystep01 mystep02" style="top:67%;">
        		<h3>高品质步行街综合视频</h3>
             <div class="inner">
                 <div class="chart01">
                   <Video
                      src='http://storage.g2ma.com/upload/video/video07.mp4'
                      controls=true
                      poster='http://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
                      initialTime='0'
                      class='video'
                    />
                    <!-- <iframe frameborder="0" style="width:100%;height:100%" src="https://v.qq.com/txp/iframe/player.html?vid=v0969pfdgtg" allowFullScreen="true"></iframe> -->
                 </div>
             </div>
        </div>
    </div>

	</div>

</template>
<script>
	import echarts from 'echarts'
	import Pagetop from '../common/pagetop.vue'
	import Secondnav from './provinnav.vue'
    import 'echarts/extension/bmap/bmap'
	export default {
	  name: 'index',
	  components: {Pagetop,Secondnav},
	  data () {
	    return {
	        itemData:'',
	        sqlist:'',
	        maplist:[],
	        mapcur:0,
	        bmap:'',
	        arealist:[{lat:120.666511,lon:28.017947,dates:{name:'温州五马禅街',logo:'pimg04',video:'video07',rl:['rk04','rl04','xb04','xf04']}}],
	        jq:1,
	        jqindex:0,
	        rlindex:0,
	        type:localStorage.getItem("type")
	    }
	  },
	  mounted(){
	  	this.getptb(1);
	  	this.getptb(2);
	  	this.getfg();
	    this.getrl();
      	this.getmap();
	  },
	  methods: {
	  	getUrl:function(logo){
	  		return require('@/assets/img0'+logo+'.png');
	  	},
	  	tjinfo:function(src){
	  		var _this=this;
	  		if(this.jqindex>=0){
		  		this.jq=5;
		  		this.rlindex=src;
		  		setTimeout(function(){
		  			_this.showarea();
		  		},500)

		  	}
	  		else{
	  			layer.msg("请先在地图上选择街区");
	  		}
	  	},
      getmap:function(){
      	var _this=this;
        var data11 = [
                        {name:"温州市",value:"0"},
                        {name:"丽水市",value:"0"},
                        {name:"台州市",value:"0"},
                        {name:"金华市",value:"0"},
                        {name:"宁波市",value:"0"},
                        {name:"绍兴市",value:"0"},
                        {name:"杭州市",value:"0"},
                        {name:"嘉兴市",value:"0"},
                        {name:"湖州市",value:"0"},
                        {name:"舟山市",value:"0"},
                        {name:"衢州市",value:"0"}
                    ];
        $.get(mapurl+'/static/other/js/zhejiang.json', function (data) {
              echarts.registerMap('zhejiang',data);//设置地图
              var myChart = echarts.init(document.getElementById('tb07'));//初始化
              var option={
                       backgroundColor:'' ,
                       grid: {
                             left: '3%',
                             right: '3%',
                             bottom: '0%',
                             top:'0%',
                             containLabel: true
                         },
                       visualMap: {
                           show: false,
                           min: 0,
                           max: 100,
                           left: 'left',
                           top: 'bottom',
                           text: ['高', '低'], // 文本，默认为数值文本
                           calculable: true,
                           categories: ['1',],
                          inRange: {
                              color: ['#f46d43']
                          },
                       },

                       series: [{
                           type: 'map',
                           mapType: 'zhejiang',
                           roam: true,
                           label: {
                               normal: {
                                   show: true,
                                   textStyle: {
                                       color: '#fff'
                                   }
                               },
                               emphasis: {
                                   textStyle: {
                                       color: '#fff'
                                   }
                               }
                           },
                           itemStyle: {
                                normal: {
                                    borderColor: '#00F2F1',
                                    borderWidth: 1,

                                    areaColor: {
                                        type: 'radial',
                                        x: 0.5,
                                        y: 0.5,
                                        r: 0.8,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: 'rgba(47,79,79, .1)' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    },


                                },

                            },
                           animation: false,
                           data:data11
                       }]
                  }
              myChart.setOption(option)
              myChart.on('click', function(params){
                var name=params.name;
                var bmap=_this.bmap;
                for(var i=0;i<data11.length;i++){
                    data11[i].value="0";
                    if(params.name == data11[i].name){
                        data11[i].value="1";
                    }
                    myChart.setOption(option);
                }
                _this.jq=1;
                if(name=='温州市'){

                	var carr=[
						{lat:120.666511,lon:28.017947,dates:{name:'温州五马禅街',logo:'pimg04',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
						{lat:120.63979,lon:27.78825,dates:{name:'温州瑞安忠义街',logo:'pimg08',video:'video07',rl:['rk04','rl04','xb04','xf04']}}
					];

                }
                else if(name=='丽水市'){

					var carr=[
						{lat:120.215752,lon:30.214367,dates:{name:'丽水处州府城步行街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
					];
                }
                else if(name=='台州市'){

                	var carr=[
                		{lat:121.12344,lon:28.84693,dates:{name:'台州临海紫阳古街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
                	];
                }
                else if(name=='金华市'){

                	var carr=[
                		{lat:119.672802,lon:29.106138,dates:{name:'金华古子城步行街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
                	];
                }
                else if(name=='宁波市'){

                	var carr=[
                			{lat:121.566869,lon:29.883002,dates:{name:'宁波老外滩步行街',logo:'pimg05',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
							{lat:121.557164,lon:29.878734,dates:{name:'宁波东鼓道步行街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
							{lat:121.544612,lon:29.85967,dates:{name:'宁波南塘老街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
							{lat:121.553661,lon:29.814203,dates:{name:'宁波水街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
                	];
                }
                else if(name=='绍兴市'){

                	var carr=[
                		{lat:120.59228,lon:29.998153,dates:{name:'绍兴鲁迅中路步行街',logo:'pimg02',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
                	];
                }
                else if(name=='杭州市'){
                	var carr=[
						{lat:120.177062,lon:30.245978,dates:{name:'杭州清河坊步行街',logo:'pimg01',video:'video04',rl:['rk04','rl04','xb04','xf04']}},
						{lat:120.215752,lon:30.214367,dates:{name:'杭州星光大道电影文化步行街',logo:'pimg03',video:'video06',rl:['rk04','rl04','xb04','xf04']}},
						{lat:120.179989,lon:30.270499,dates:{name:'杭州中国丝绸城步行街',logo:'pimg07',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
						{lat:120.077558,lon:30.281039,dates:{name:'杭州湘湖慢生活街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
					];
                }
                else if(name=='嘉兴市'){

                	var carr=[
                		{lat:120.421555,lon:30.419808,dates:{name:'嘉兴海宁硬石商业街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
						{lat:120.215752,lon:30.214367,dates:{name:'嘉兴月河步行街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
                	];
                }
                else if(name=='湖州市'){

                	var carr=[
                		{lat:120.760924,lon:30.776212,dates:{name:'湖州爱山广场步行街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
						{lat:120.439829,lon:30.885181,dates:{name:'湖州南潯东大街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
						{lat:119.92567,lon:28.443857,dates:{name:'湖州长兴东鱼坊步行街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
                	];
                }
                else if(name=='舟山市'){

                	var carr=[
                		{lat:122.206524,lon:29.999219,dates:{name:'舟山520幸福街',logo:'pimg01',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
                	];
                }
                else if(name=='衢州市'){

                	var carr=[
                		{lat:118.875445,lon:28.961353,dates:{name:'衢州水亭门步行街',logo:'pimg06',video:'video07',rl:['rk04','rl04','xb04','xf04']}},
                	];
                }
                _this.arealist=carr;
                _this.showarea();
              });
            });
      },
      showarea:function(){
      	$('.filterbg').show();
		$('.popup').show();
		$('.popup').width('3px');
		$('.popup').animate({height: '50%'},400,function(){
			$('.popup').animate({width: '50%'},400);
		});
		var _this=this;
	    setTimeout(_this.summaryShow,800);
	  },
	  close:function(){
	    $('.filterbg').hide();
	  	$('.popupClose').css('display','none');
		$('.summary').hide();
		$('.popup').animate({width: '3px'},400,function(){
			$('.popup').animate({height: 0},400);
		});

	  },
	  summaryShow:function(){
	  	$('.popupClose').css('display','block');
     	$('.summary').show();
	  },
	  	getptb:function(index){
	  		var n = [{
        		backgroundColor:'rgba(255, 255, 255, 0)',
				grid: {
			        left: '3%',
			        right: '3%',
			        bottom: '0%',
			        top:'5%',
			        containLabel: true
			    },
				xAxis:{
					type: "category",
					boundaryGap: !1,
					data: ["1月", "2月", "3月", "4月", "5月", "6月","7月", "8月", "9月", "10月", "11月", "12月",],
			          axisLine: {
			              lineStyle: {
			                  color: "#b0c5e4",
			              }
			          }
				},
				yAxis: {
					type: "value",
			          axisLine: {
			              lineStyle: {
			                  color: "#b0c5e4",
			              }
			          }
				},
				series: [{
					name: "销售额",
					type: "line",
					smooth: !0,
					itemStyle: {
						normal: {
							areaStyle: {
								type: "default"
							}
						}
					},
					data: [111, 222, 333, 444, 555, 666, 333, 3333, 5555,888,115,698]
				}]
			}, {

				tooltip: {
					trigger: "item",
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series: [
	              {
	                  name: '访问来源',
	                  type: 'pie',
	                  radius:'50%',
	                  avoidLabelOverlap: false,
	                  label: {
	                      show: false,
	                      position: 'center'
	                  },

	                  emphasis: {
	                      label: {
	                          show: true,
	                          fontSize: '30',
	                          fontWeight: 'bold'
	                      }
	                  },
	                  labelLine: {
	                      show: false
	                  },
	                  itemStyle:{
				        normal:{
				           label:{
				              show: true,
				              formatter: '{b}:{d}%'
				           },
				           labelLine :{show:true},
				           color:function(params) {
	                            var colorList = [
                                    '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000',
                                ];
                                return colorList[params.dataIndex]
	                        }
						}
					  },
	                  data: [{
						value:252,
						name: "授牌"
					}, {
						value: 610,
						name: "试点"
					}, {
						value: 320,
						name: "培育"
					}, {
						value: 535,
						name: "待评审"
					}, {
						value: 100,
						name: "其它"
					}]
	              }
	          ]


			},
      {

          grid: {
                left: '3%',
                right: '3%',
                bottom: '0%',
                top:'5%',
                containLabel: true
            },
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        left: 'center',
				        textStyle:{
				            color:"#b0c5e4"
				        },
				        data: ['品牌影响力', '夜间经济', '活动频度', '景气度', '满意度']
				    },
				    radar: [
				        {
				            indicator: [
				                {text: '品牌影响力', max: 100},
				                {text: '夜间经济', max: 100},
				                {text: '活动频度', max: 100},
				                {text: '景气度', max: 100},
				                {text: '满意度', max: 100}
				            ],
				            radius: 80,
				            center: ['50%', '60%'],
				        },

				    ],
				    series: [
				        {
				            type: 'radar',
				            tooltip: {
				                trigger: 'item'
				            },
				            areaStyle: {},
                    itemStyle:{
                        normal:{

                           labelLine :{show:true},
                           color:function(params) {
                                      var colorList = [
                                            '#00FFFF', '#00FF00', '#FFFF00', '#FF8C00', '#FF0000',
                                        ];
                                        return colorList[params.dataIndex]
                                  }
                    }
                    },
				            data: [
				                {
				                    value: [60, 73, 85, 40,90],
				                    name: '地域'
				                }
				            ]
				        }
				    ]

			}]
     		 var option=n[index];
      		var i=index+1;
      		var id='tb0'+i;
			let myChart = echarts.init(document.getElementById(id))
			myChart.clear();
			myChart.setOption(option);
	  	},
		timeDate:function(time,s){
	  		return FormatDate(time,s);
	    },


      getrl:function(){
        var map = new BMapGL.Map("tb04");    // 创建Map实例
        	this.bmap=map;
        	map.centerAndZoom(new BMapGL.Point(120.662503,28.016781), 19);  // 初始化地图,设置中心点坐标和地图级别
        	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        	map.setHeading(64.5);
        	map.setTilt(73);

          map.setMapStyleV2({
            styleId: '236bf9896f40739fa728522fe36fec3b'
          });
      	/*var _this=this;
	        $.get(mapurl+'/static/other/js/hangzhou-tracks.json', function (data) {
	        var points = [].concat.apply([], data.map(function (track) {
	            return track.map(function (seg) {
	                return seg.coord.concat([1]);
	            });
	        }));
	        let myChart = echarts.init(document.getElementById('tb04'))
	        var option='';
	        myChart.setOption(option = {
	            animation: false,
	            bmap: {
	                center: [120.13066322374, 30.240018034923],
	                zoom: 14,
	                roam: true
	            },
	            visualMap: {
	                show: false,
	                top: 'top',
	                min: 0,
	                max: 5,
	                seriesIndex: 0,
	                calculable: true,
	                inRange: {
	                    color: ['blue', 'blue', 'green', 'yellow', 'red']
	                }
	            },
	            series: [{
	                type: 'heatmap',
	                coordinateSystem: 'bmap',
	                data: points,
	                pointSize: 5,
	                blurSize: 6
	            }]
	        });
	        // 添加百度地图插件
	        var bmap = myChart.getModel().getComponent('bmap').getBMap();
			bmap.addControl(new BMap.MapTypeControl());

			var arr=[
				{lat:120.177062,lon:30.245978,dates:{name:'杭州清河坊步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.215752,lon:30.214367,dates:{name:'杭州星光大道电影文化步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.179989,lon:30.270499,dates:{name:'杭州中国丝绸城步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.077558,lon:30.281039,dates:{name:'杭州湘湖慢生活街',hot:'100',top:'100',up:'100'}},
				{lat:121.566869,lon:29.883002,dates:{name:'宁波老外滩步行街',hot:'100',top:'100',up:'100'}},
				{lat:121.557164,lon:29.878734,dates:{name:'宁波东鼓道步行街',hot:'100',top:'100',up:'100'}},
				{lat:121.544612,lon:29.85967,dates:{name:'宁波南塘老街',hot:'100',top:'100',up:'100'}},
				{lat:121.553661,lon:29.814203,dates:{name:'宁波水街',hot:'100',top:'100',up:'100'}},
				{lat:120.662503,lon:28.016781,dates:{name:'温州五马•禅街',hot:'100',top:'100',up:'100'}},
				{lat:120.421555,lon:30.419808,dates:{name:'嘉兴海宁硬石商业街',hot:'100',top:'100',up:'100'}},
				{lat:120.63979,lon:27.78825,dates:{name:'温州瑞安忠义街',hot:'100',top:'100',up:'100'}},
				{lat:120.760924,lon:30.776212,dates:{name:'湖州爱山广场步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.215752,lon:30.214367,dates:{name:'嘉兴月河步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.439829,lon:30.885181,dates:{name:'湖州南潯东大街',hot:'100',top:'100',up:'100'}},
				{lat:119.92567,lon:28.443857,dates:{name:'湖州长兴东鱼坊步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.215752,lon:30.214367,dates:{name:'丽水处州府城步行街',hot:'100',top:'100',up:'100'}},
				{lat:120.59228,lon:29.998153,dates:{name:'绍兴鲁迅中路步行街',hot:'100',top:'100',up:'100'}},
				{lat:119.672802,lon:29.106138,dates:{name:'金华古子城步行街',hot:'100',top:'100',up:'100'}},
				{lat:118.875445,lon:28.961353,dates:{name:'衢州水亭门步行街',hot:'100',top:'100',up:'100'}},
				{lat:122.206524,lon:29.999219,dates:{name:'舟山520幸福街',hot:'100',top:'100',up:'100'}},
				{lat:121.12344,lon:28.84693,dates:{name:'台州临海紫阳古街',hot:'100',top:'100',up:'100'}},
			];
			_this.maplist=arr;
			_this.bmap=bmap;
			setTimeout(function(){
				for(var i=0;i<arr.length;i++){
					_this.setmapinfo(i)
				}
			},600)
			bmap.setMapStyleV2({
			  styleId: '236bf9896f40739fa728522fe36fec3b'
			});
        });*/

      },
      setmapinfo:function(num){
      	var bmap=this.bmap;
      	var res=this.maplist[num];
      	var point = new BMap.Point(res.lat,res.lon);
		var marker = new BMap.Marker(point);
		bmap.addOverlay(marker);
        var sContent="<div class='mapinfo'>"+res.dates.name+"</div>";
        var infoWindow=new BMap.InfoWindow(sContent);
        marker.addEventListener("click", function () {
            this.openInfoWindow(new BMap.InfoWindow(sContent));
        });
      },
      showareaxq:function(num){
      	this.close();
      	this.jqindex=num;
      	var arr=this.arealist;
      	var res=arr[num];
      	var map=this.bmap;
      	map.centerAndZoom(new BMapGL.Point(res.lat,res.lon), 19);
      	$(".video").attr("src",'http://storage.g2ma.com/upload/video/'+arr[num].dates.video+'.mp4')
      	map.setTilt(73);
      	this.getptb(1);
	  	this.getptb(2);
	  	this.getfg();
      },
      getfg:function(){
        var option = {
            barWidth :10,
            grid: {
		        left: '5%',
		        right: '5%',
		        bottom: '3%',
		        top:'3%',
		        containLabel: true
		    },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: "#b0c5e4",
                    }
                },
                data: ['6-01','6-02', '6-03', '6-04', '6-05', '6-06', '6-07', '6-08', '6-09', '6-10']
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "#b0c5e4",
                    }
                },

                type: 'value'
            },
            series: [{
                data: [80, 68, 78, 80, 70, 90, 99,87,95, 80],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0)'
                }
            }]
        };
        let myChart = echarts.init(document.getElementById('tb05'))
        myChart.clear();
        myChart.setOption(option);
      }
	  },
	  updated:function(){
  		this.isShow = true;
  		layui.use('form', function(){
		  var form = layui.form;
		  form.render();

		});

 	  },
	}
</script>
<style>

	@import '../../../static/other/css/zlgj/index.css'

</style>
